<template>
    <div @click="isShow = !isShow"
        class="w-24 rounded-full bg-[var(--inputBg)] flex justify-center items-center cursor-pointer">
        <i class="iconfont icon-yonghu-yuan mr-1 text-[var(--iconBg)] before:text-2xl"></i>
        <span class="text-[var(--text)] text-xs">未登录</span>
        <span class="text-xs text-[var(--iconBg)] text-[10px] ml-1">&#9660</span>
    </div>
    <div v-if="isShow" class="bg-white w-96 h-[32rem] rounded-sm fixed top-16 left-2/3 translate-x-[-50%] z-50">
        <!-- 顶部扫码区 -->
        <div class="flex justify-between items-cente">
            <div class="flex relative items-center">
                <div class="absolute left-0 top-0  bg-red-500"></div>
                <i class="iconfont icon-erweima before:text-3xl sanjiao"></i>
                <div class="text-slate-300 text-xs px-2 py-1 rounded-sm bg-stone-600">
                    <p>扫码登录更安全</p>
                </div>
            </div>
            <!-- 关闭 -->
            <i @click="closeBtn"
                class="iconfont icon-guanbi text-gray-400 before:text-2xl hover:text-gray-600 cursor-pointer mr-1"></i>
        </div>
        <!-- Logo -->
        <div class="text-center">
            <i class="iconfont icon-qiepian before:text-[80px] text-red-500"></i>
        </div>
        <!-- 登录表单 -->
        <el-form :model="loginForm" ref="loginRef" :rules="loginRules" class="flex flex-col items-center">
            <el-form-item prop="phone">
                <div class="w-72">
                    <el-input v-model="loginForm.phone" placeholder="请输入邮箱号"></el-input>
                </div>
            </el-form-item>
            <el-form-item prop="password">
                <div class="w-72">
                    <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" maxlength="18">
                        <template #prefix>
                            <i class="iconfont icon-mima"></i>
                        </template>
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="w-72 flex justify-between">
                    <el-checkbox-group v-model="loginForm.autoLogin">
                        <el-checkbox label="自动登录" value="自动登录" name="type" />
                    </el-checkbox-group>
                    <div>
                        <a href="" class="text-blue-400 mr-2">忘记密码</a>
                        <span class="text-gray-500">|</span>
                        <a href="" class="text-blue-400 ml-2">验证码登录</a>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button @click="submitForm(loginRef)" type="danger" class="w-72">登录</el-button>
            </el-form-item>
            <el-form-item>
                <!-- 注册 -->
                <div class="text-center">
                    <a href="">注册</a>
                </div>
            </el-form-item>
            <el-form-item>
                <!-- 登录方式 -->
                <div class="flex justify-center">
                    <div class="flex items-center justify-between w-72">
                        <i class="iconfont icon-weixin bg-green-600 px-3 py-1 rounded-full text-white "></i>
                        <i class="iconfont icon-QQ bg-blue-600 px-3 py-1 rounded-full text-white "></i>
                        <i class="iconfont icon-xinlang bg-red-600 px-3 py-1 rounded-full text-white "></i>
                        <i class="iconfont icon-wangyi bg-red-600 px-3 py-1 rounded-full text-white "></i>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="w-full flex">
                    <el-checkbox v-model="loginForm.isOk" label="同意" name="type" />
                    <div>
                        <a href="" class="text-blue-400">《服务条款》</a>
                        <a href="" class="text-blue-400">《隐私政策》</a>
                        <a href="" class="text-blue-400">《儿童隐私政策》</a>
                    </div>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang='ts'>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import type { loginFrom } from '@renderer/store/modules/login/type'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useStore } from '@renderer/store'
const { countriesCode, login } = useStore()
const router = useRouter()
// 指定this
const ctx = getCurrentInstance()
const bus = ctx?.appContext.config.globalProperties.$bus
const isShow = ref<boolean>(false)
// 关闭按钮
const closeBtn = () => {
    isShow.value = false
    loginRef.value?.resetFields()
}
let loginForm = reactive<loginFrom>({
    phone: '',
    password: '',
})
const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
// 自定义邮箱号验证规则
const checkPhone = (_: any, value: any, callback: any) => {
    if (value.trim() == '') {
        callback(new Error('请填写邮箱号'))
    } else if (!emailReg.test(value)) {
        callback(new Error('请输入正确的邮箱号'))
    } else {
        callback()
    }
}
// 获取表单
const loginRef = ref<FormInstance>()
onMounted(() => {
    countriesCode.getContriesCodeList()
})
// 登录按钮
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    if (!(loginForm.isOk)) {
        ElMessage.warning('请同意服务条款和隐私政策')
    } else {
        formEl.validate(async (valid) => {
            if (valid) {
                const res = await login.getUserInfo(loginForm.phone, loginForm.password)
                if (res.code !== 200) {
                    ElMessage.error(res.message)
                } else {
                    closeBtn()
                    let user = JSON.stringify(res.profile)
                    localStorage.setItem('user', user)
                    ElMessage.success("登录成功")
                    router.push('/')
                    bus.emit('login')
                    bus.emit('userInfo', res.profile)
                }
            } else {
                ElMessage.error('请检查必填项')
            }
        })
    }
}
// 表单验证规则
const loginRules = reactive<FormRules<loginFrom>>({
    phone: [
        { required: true, validator: checkPhone, trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请填写密码', trigger: 'blur' },
        { min: 6, max: 18, message: '长度6-18位', trigger: 'blur' },
    ],
})
</script>
<style scoped lang='less'>
:deep(.el-checkbox__label) {
    color: initial;
}

div:nth-child(1) {
    -webkit-app-region: no-drag;
}

.sanjiao {
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
</style>